<template>
    <div class="specParamsBox">
        <div class="infoItem" v-if="detail.specs && detail.specs.length>0">
            <label>Specs</label>
            <div class="valtxt">
               <p>{{orderInfo.specs.specName?(orderInfo.specs.specGroupName+"/"+orderInfo.specs.specName):'Please Select'}}</p> 
            </div>
            <i class="iconfont icon-jiantouyou" @click="showFlag1=true"></i>
            <spec-select v-if="showFlag1" @close="showFlag1=false"/>
        </div>
        <div class="infoItem">
            <label>Deliver Goods</label>
            <div class="valtxt" v-if="detail.apiShopDetailDto">
               <p>
                   <template v-if="detail.apiShopDetailDto.logisticsDeliveryStatus==1"> 
                        Spot, delivery within 48 hours after payment;
                    </template>
                   <template v-if="detail.apiShopDetailDto.logisticsSelfStatus==1">
                        Pick up place:
                        <template v-for="dt in detail.apiShopDetailDto.selfDeliverys" :key="dt.address">{{dt.address}},</template>
                   </template>
                </p> 
            </div>
        </div>
        <div class="infoItem">
            <label>Freight</label>
            <div class="valtxt">
               <p>Free / charged according to your receiving area</p> 
            </div>
        </div>
        <div class="infoItem" v-if="goodsParams.length>0">
            <label>Parameter</label>
            <div class="valtxt">
                <p class="slh">
                    <template v-for="(dt,i) in goodsParams" :key="dt">
                        {{dt.paramName}} / {{dt.paramValue}}
                        <template v-if="i<goodsParams.length-1">，</template>
                    </template>
                </p>
               <!-- <p>{{orderInfo.params.paramName?(orderInfo.params.paramName+" / "+orderInfo.params.paramValue):'Make / model'}}</p>  -->
            </div>
            <i class="iconfont icon-jiantouyou" @click="showFlag2=true"></i>
            <parmas-select v-if="showFlag2" @close="showFlag2=false"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import specSelect from './specSelect.vue'
import parmasSelect from './parmasSelect.vue'
export default {
    components:{
       specSelect,
       parmasSelect
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            showFlag1:false,
            showFlag2:false,
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            goodsParams:[]
        })

        onMounted(()=>{
            for(let i=0;i<state.detail.params.length;i++){
                const item = state.detail.params[i]
                if(item.paramName  && item.paramValue){
                    state.goodsParams.push(item)
                } 
            }
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .infoItem{
            display: flex;
            height: 85px;
            background: rgba(103,248,255,0.2000);
            align-items:center;
            padding: 0 20px 0 30px;
            color: #fff;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            border: 1px solid rgba(103,248,255,0.5000);
            font-size: 24px;
            &+.infoItem{
                margin-top: 15px;
            }
            label{
                width: 250px;
                border-right: 6px solid #5ADBED;
                flex-shrink: 0;
            }
            .valtxt{
                flex: 1;
                text-align: left;
                padding: 0 0 0 20px;
                width: 0;
                flex-shrink: 0;
                &.valtxt2{
                    width: 280px;
                }
                p{
                    color: #fff;
                    line-height: 30px;
                    overflow: hidden;
                    &.slh{
                        width: 100%;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                em{
                    font-family: Inter-Medium, Inter;
                    font-weight: 600;
                    font-style: normal;
                    color: #CBFAFF;
                }
            }
            i{
                flex-shrink: 0;
                color: #64D5EC;
            }
        }
</style>